<script setup>
import {
  onLoad
} from '@dcloudio/uni-app';
import {
  ref, onMounted
} from 'vue';
import Popup from '@/components/Popup.vue';
import { BASE_URL } from "../../../utils/api";
import SuccessFailurePopup from '@/components/SuccessFailurePopup.vue'

const progress = ref(100)

const randomList = ref([])

const timerId = ref(null)

const showPopup = ref(false);

// 拼图完成标识
const puzzleCompleted = ref(false)

const level = ref(1); // 默认关卡为1

const successPopupShow = ref(false)
const failurePopupShow = ref(false)
const popupTitle = ref('')
const popupImage = ref('')
const popupContent = ref('')
const popupDetailContent = ref('')

// 不同关卡的详情内容
const levelDetails = {
  1: `苏维埃政府纪念馆位于龙川县佗城镇，是纪念1927年成立的龙川县苏维埃政府的重要历史遗址。

该纪念馆见证了龙川人民在中国共产党领导下，为革命事业英勇奋斗的光辉历程。馆内陈列着大量珍贵的历史文物和图片资料，生动展现了那个波澜壮阔的革命年代。

苏维埃政府是中国共产党在土地革命战争时期建立的工农民主政权，龙川县苏维埃政府的成立，标志着龙川人民革命斗争进入了一个新的历史阶段。这里不仅是重要的革命教育基地，更是龙川红色文化的重要组成部分。`,

  2: `佗城，古称龙川城，是龙川县历史文化的发源地，也是广东省历史文化名城。

佗城历史悠久，文化底蕴深厚。据史书记载，佗城始建于秦朝，距今已有2200多年的历史。这里曾是龙川县的政治、经济、文化中心，见证了龙川历史的变迁和发展。

佗城保存着众多历史遗迹和古建筑，包括古城墙、古街道、古民居等，这些都是龙川历史文化的重要载体。佗城不仅是一座历史古城，更是龙川人民精神家园的象征，承载着深厚的文化内涵和历史记忆。`,

  3: `龙川县博物馆是展示龙川历史文化的重要窗口，馆内收藏了大量珍贵的历史文物和民俗展品。

博物馆通过丰富的展陈内容，全面展现了龙川从古至今的历史发展脉络，包括古代文明、革命历史、民俗文化等多个方面。馆内展品丰富多样，既有考古发掘的文物，也有反映龙川人民生活的民俗用品。

龙川县博物馆不仅是重要的文化教育场所，更是传承和弘扬龙川优秀传统文化的重要基地，为人们了解龙川历史、感受龙川文化提供了重要平台。`,

  4: `龙川县图书馆是龙川县重要的文化设施，为龙川人民提供了丰富的阅读资源和学习平台。

图书馆藏书丰富，涵盖文学、历史、科技、艺术等多个领域，满足了不同读者的阅读需求。馆内环境优雅，设施完善，为读者提供了良好的阅读和学习环境。

龙川县图书馆不仅是知识的宝库，更是文化传承的重要场所，为提升龙川人民的文化素养、促进精神文明建设发挥着重要作用。`,

  5: `杂技木偶山歌艺术团是龙川县重要的民间艺术团体，传承和发扬着龙川独特的民间艺术。

该艺术团融合了杂技、木偶戏、山歌等多种艺术形式，形成了独具特色的表演风格。杂技表演惊险刺激，木偶戏生动有趣，山歌悠扬动听，深受群众喜爱。

杂技木偶山歌艺术团不仅丰富了龙川人民的文化生活，更是龙川民间艺术的重要传承者，为保护和弘扬龙川非物质文化遗产做出了重要贡献。`,

  6: `龙川杂技团是龙川县著名的专业艺术团体，以其精湛的杂技表演技艺而闻名。

杂技团表演节目丰富多样，包括高空杂技、地面杂技、魔术等多种形式，技艺精湛，表演精彩。杂技演员们经过长期刻苦训练，掌握了各种高难度的杂技技巧，为观众带来了精彩的视觉盛宴。

龙川杂技团不仅在国内享有盛誉，还多次参加国际文化交流活动，为传播中国文化、展示龙川艺术魅力做出了重要贡献。`,

  7: `霍山是龙川县著名的自然景观和旅游胜地，以其独特的山形地貌和丰富的自然资源而闻名。

霍山山势雄伟，风景秀丽，山上植被茂密，空气清新。山上有多处历史遗迹和人文景观，包括古寺庙、石刻等，具有重要的历史和文化价值。

霍山不仅是重要的自然景观，更是龙川人民休闲娱乐、亲近自然的重要场所。这里四季景色各异，春有百花盛开，夏有绿树成荫，秋有层林尽染，冬有银装素裹，是龙川不可多得的自然瑰宝。`,

  8: `黄居仁故居是龙川县重要的历史文化遗产，是纪念著名历史人物黄居仁的重要场所。

黄居仁是龙川县历史上的重要人物，为龙川的发展做出了重要贡献。故居保存完好，建筑风格独特，具有重要的历史价值和建筑价值。

故居内陈列着大量与黄居仁相关的历史文物和资料，生动展现了黄居仁的生平事迹和历史贡献。这里不仅是重要的历史教育基地，更是了解龙川历史、传承龙川文化的重要窗口。`,

  9: `龙川文化中心是龙川县重要的文化设施，是展示龙川文化、促进文化交流的重要平台。

文化中心设施完善，功能齐全，包括展览厅、表演厅、活动室等多个功能区，为龙川人民提供了丰富的文化活动场所。中心定期举办各种文化展览、文艺演出、培训活动等，丰富了龙川人民的文化生活。

龙川文化中心不仅是文化活动的场所，更是传承和弘扬龙川优秀文化的重要基地，为提升龙川文化品位、促进文化发展发挥着重要作用。`
}

// 新增：启动定时器函数
const startTimer = () => {
  if (timerId.value !== null) {
    clearInterval(timerId.value)
  }
  timerId.value = setInterval(() => {
    progress.value--;
    if (progress.value < 0) {
      progress.value = 0
      clearInterval(timerId.value)
      timerId.value = null
      success() // 添加进度归零时的检查
    }
    success() // 每次计时器触发时都检查
  }, 800)
}

// 初始化游戏
onMounted(() => {
  randomList.value = shuffleArray(imageList.value)
  console.log(imageList.value)
  startTimer() // 修改为调用启动函数
  success()
})

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// 新增：暂停处理函数
const handlePause = () => {
  if (timerId.value !== null) {
    clearInterval(timerId.value)
    timerId.value = null
  }
  showPopup.value = true
}

// 跳转回地图
function returnMap() {
  uni.redirectTo({
    url: '/pages/index/gameMap/gameMap'
  })
}

const imageList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])

const imageList2 = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])

const firstClick = ref(-1)
const secondClick = ref(-1)
const temp = ref(-1)
let a = 1
// 在每次拼图块交换后调用success方法检查是否完成
const clickPin = (index) => {
  if (a === 1) {
    a = 2
    firstClick.value = index
  } else {
    a = 1
    secondClick.value = index
    temp.value = randomList.value[firstClick.value];
    randomList.value[firstClick.value] = randomList.value[secondClick.value]
    randomList.value[secondClick.value] = temp.value

    // 每次交换后检查是否完成
    success()
  }
}

const handleConfirm = () => {
  console.log('点击确认')
  showPopup.value = false
  if (timerId.value === null && progress.value > 0) {
    startTimer()
  }
}

function success() {
  let correctCount = 0
  for (let index = 0; index < randomList.value.length; index++) {
    if (randomList.value[index] === imageList2.value[index]) {
      correctCount++
    }
  }
  if (correctCount === 9) {
    popupTitle.value = '通关成功'
    popupImage.value = `${BASE_URL}/mine/happy.svg`
    popupContent.value = '恭喜你通关成功，与叁叁一起探索这里的故事吧~'
    popupDetailContent.value = levelDetails[level.value] || '暂无详细信息'
    successPopupShow.value = true
    getApp().globalData.updateLevelStatus(level.value, true);
    if (timerId.value !== null) {
      clearInterval(timerId.value)
      timerId.value = null
    }
  } else if (progress.value === 0 && !puzzleCompleted.value) {
    popupTitle.value = '通关失败'
    popupImage.value = `${BASE_URL}/mine/regret.svg`
    popupContent.value = '很遗憾闯关失败，但是可以跟着叁叁一起探索这里的故事哦~'
    popupDetailContent.value = levelDetails[level.value] || '暂无详细信息'
    failurePopupShow.value = true
  }
}

onLoad((options) => {
  if (options.level) {
    level.value = Number(options.level)
  }
  console.log("options", options)
})

// 添加重新加载方法
const reloadPage = () => {
  uni.reLaunch({
    url: `/pages/index/JigsawPuzzles/JigsawPuzzles?level=${level.value}`
  })
}
</script>


<template>
  <view class="flex entire-container">
    <view class="gameContainer flex">
      <!-- 左图标 -->
      <view class="game  flex column pad-0 j-c-s-b">
        <!-- 定义一个数组来存储图片的旋转角度 -->
        <template v-for="(rotation, index) in [0, -90]" :key="index">
          <image :src="`${BASE_URL}/game/corner.svg`" mode="widthFix" class="corner-width"
            :style="{ transform: `rotate(${rotation}deg)` }"></image>
        </template>
      </view>


      <view class="gameContent full  flex center j-c-s-b gap-1">
        <!-- 进度条样式 -->
        <view class="rotated-progress flex column j-c-s-b center">
          <!-- 使用三元表达式简化代码，根据 progress 的值动态绑定图片路径 -->
          <image :src="progress > 0 ? `${BASE_URL}/game/happy.png` : `${BASE_URL}/game/sad.png`" mode="widthFix"
            style="width: 45rpx;"></image>
          <view class="vertical-progress-bar">
            <view class="progress" :style="{ height: progress + '%' }"></view>
          </view>
        </view>

        <!-- 游戏内容样式 -->
        <view class="gameplay">
          <image @click="clickPin(index)" :src="`${BASE_URL}/game/level${level}/${item}.png`"
            v-for="(item, index) in randomList" :key="index" class="grid-item" mode="aspectFill"></image>
        </view>

        <!-- 基本信息样式 -->
        <view class="flex column gap-1">
          <view class="level-aim flex column center" style="gap: 12rpx;">
            <text style="font-size: 12rpx; font-weight: bold;">本关卡目标</text>
            <image :src="`${BASE_URL}/tile/level${level.toString()}.png`" mode="widthFix" style="width: 100rpx;">
            </image>
          </view>
          <view class="flex column gap-0">
            <button class="btn button-pause" @click="handlePause()">
              暂停
            </button>
            <button @click="returnMap()" class="btn button-return ">
              返回
            </button>
          </view>
        </view>
      </view>

      <!-- 右图标 -->
      <view class="flex column pad-0  j-c-s-b">
        <!-- 使用 v-for 循环渲染图片，减少代码重复 -->
        <template v-for="(rotation, index) in [90, -180]" :key="index">
          <image :src="`${BASE_URL}/game/corner.svg`" mode="widthFix" class="corner-width"
            :style="{ transform: `rotate(${rotation}deg)` }"></image>
        </template>
      </view>
    </view>
  </view>
  <view>
    <view>
      <!-- 暂停弹窗 -->
      <Popup v-model="showPopup">
        <image :src="`${BASE_URL}game/pause.png`" mode="widthFix" style="width: 25rpx;"></image>
        <text @click="handleConfirm">
          继续
        </text>
      </Popup>
    </view>
  </view>
  <!-- 新增：成功或失败弹窗 -->
  <view>
    <SuccessFailurePopup :show="successPopupShow" :title="popupTitle" :imageUrl="popupImage" :content="popupContent"
      :detailContent="popupDetailContent" @update:show="val => successPopupShow = val" @success="returnMap" />
    <SuccessFailurePopup :show="failurePopupShow" :title="popupTitle" :imageUrl="popupImage" :content="popupContent"
      :detailContent="popupDetailContent" @update:show="val => failurePopupShow = val" @failure="reloadPage" />
  </view>
</template>

<style scoped>
.gameContainer {
  border: 1px solid black;
  background-color: #dde6ca;
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
}

.gameContent {
  padding: 5rpx 0rpx 5rpx 0rpx;
}

.level-aim {
  background-color: #f8f3d7;
  width: 140rpx;
  height: 140rpx;
  border-radius: 10%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}

.btn {
  text-align: center;
  font-size: 24rpx;
  font-weight: bold;
  width: 100rpx;
}

.gameplay {
  width: 310rpx;
  height: 310rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.rotated-progress {
  background-color: #c98f5d;
  border-color: #592d10;
  border-width: 10rpx;
  width: 80rpx;
  height: 310rpx;
  border: #592d10 solid;
  border-radius: 10rpx;

}

.vertical-progress-bar {
  width: 30rpx;
  /* 进度条宽度 */
  height: 250rpx;
  /* 进度条总高度 */
  background-color: #c98f5d;
  /* 背景颜色 */
  border-radius: 20rpx;
  /* 圆角 */
  overflow: hidden;
  position: relative;
  border: 1rpx #43d2a7 solid;
  bottom: 15rpx;
}

.progress {
  width: 100%;
  position: absolute;
  bottom: 0;
  /* 从底部开始增长 */
  background-color: #43d2a7;
  /* 进度条颜色 */
  transition: height 0.3s ease;
  /* 平滑过渡效果 */
}

.grid-item {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  width: 100%;
  height: 100%;
}

.button-pause {
  background-color: #f1b81a;
}

.button-return {
  background-color: #52d64e;
}

/* 整个容器 */
.entire-container {
  /* 新增滚动锁定 */
  touch-action: none;
  overflow: hidden;
}

.gap-0 {
  gap: 10rpx;
}
</style>